<template>
  <view :key="componentKey" class="section-common flexc">
    <view class="header">
      <u-tabs
        :current="tabCurrent"
        :scrollable="true"
        :list="tabList"
        keyName="title"
        lineColor="#CB0011"
        :lineWidth="28"
        :lineHeight="2"
        @click="tabClick"
        :itemStyle="{
          height: '88rpx',
          fontSize: '28rpx',
          color: '#9695A3',
        }"
        :activeStyle="{ fontWeight: 'bold', color: '#000000' }"
        :inactiveStyle="{}"></u-tabs>
    </view>
    <!-- 发起提交 -->
    <template v-if="tabCurrent == 0">
      <view class="flex1 over" style="padding-bottom: 50upx">
        <view class="wrap mb16">
          <view class="box2">
            <view class="">部门</view>
            <view class="">{{ action[type] }}</view>
          </view>
        </view>
        <view @click="showCheckUser = true" class="wrap mb16">
          <view class="box">
            <view class="">检验人</view>
            <view class="box-b flex">
              <input
                class="flex1"
                type="text"
                disabled
                v-model="topObj.inspector_user_name"
                placeholder="默认检验人" />
              <image src="/static/login/pop-arrow.png" mode="aspectFit"></image>
            </view>
          </view>
        </view>
        <view @click="showCheckDateFn" class="wrap mb16">
          <view class="box">
            <view class="">检验日期</view>
            <view class="box-b flex">
              <input
                class="flex1"
                type="text"
                v-model="topObj.test_time"
                disabled
                placeholder="请选择" />
              <image src="/static/login/pop-arrow.png" mode="aspectFit"></image>
            </view>
          </view>
        </view>
        <view class="wrap mb16">
          <view class="" v-for="(item, index) in list" :key="index">
            <view
              :class="['box1', 'flex-between', !item.disabled ? 'box-pd' : '']">
              <input
                type="text"
                v-model="item.title"
                :disabled="item.disabled"
                @blur="editListData(item)"
                class="flex1"
                placeholder="请输入检验项目名称" />
              <view
                v-if="!item.isAddItem && isHavePermission"
                @click="editListData(item)"
                class="">
                {{ item.disabled ? "修改" : "确定" }}
              </view>
              <view
                v-if="item.isAdd"
                style="margin-left: 10rpx"
                @click="
                  () => {
                    list.splice(index, 1);
                    addNum -= 1;
                  }
                ">
                删除
              </view>
              <view
                v-if="item.isAddItem"
                style="margin-left: 10rpx"
                @click="
                  () => {
                    list.splice(index, 1);
                    item.addNum -= 1;
                  }
                ">
                删除
              </view>
            </view>
            <view @click="" class="box flex">
              <view class="">检验时间</view>
              <view
                @click="
                  listClickIndex = index;
                  showCheckTime = true;
                "
                class="flex1 box-b1 flex">
                <input
                  class="flex1"
                  type="text"
                  v-model="item.inspection_time"
                  disabled
                  placeholder="请选择" />
                <image
                  src="/static/login/pop-arrow.png"
                  mode="aspectFit"></image>
              </view>
            </view>
            <view class="box flex">
              <view class="">检验数量</view>
              <input
                class="flex1"
                type="text"
                @blur="
                  checkUnqualified(
                    item,
                    item.inspection_num,
                    item.unqualified_num
                  )
                "
                v-model="item.inspection_num"
                placeholder="请输入" />
            </view>
            <view class="box flex">
              <view class="">不合格数</view>
              <input
                class="flex1"
                @blur="
                  checkUnqualified(
                    item,
                    item.inspection_num,
                    item.unqualified_num
                  )
                "
                v-model="item.unqualified_num"
                type="text"
                placeholder="请输入" />
            </view>
            <view class="box flex">
              <view class="">不合格率</view>
              <input
                class="flex1"
                disabled
                v-model="item.unqualified_level"
                type="text"
                placeholder="请输入" />
            </view>
            <view class="box flexc">
              <view class="mb28">不合格原因及采取措施</view>
              <view class="" style="height: 190upx">
                <u--textarea
                  v-model="item.unqualified_info"
                  style="height: 100%"
                  maxlength="200"
                  placeholder="请输入备注信息"></u--textarea>
              </view>
            </view>

            <view class="box flex-between">
              <view class="">结果判定</view>
              <view class="flex">
                <view @click="changeResult(item, 1)" class="">
                  <image
                    v-if="item.result == 2"
                    src="/static/order/r.png"
                    mode="aspectFit"
                    class="radio"></image>
                  <image
                    v-if="item.result == 1"
                    src="/static/order/r-s.png"
                    mode="aspectFit"
                    class="radio"></image>
                  <text>OK</text>
                </view>
                <view @click="changeResult(item, 2)" class="ml40">
                  <image
                    v-if="item.result == 1"
                    src="/static/order/r.png"
                    mode="aspectFit"
                    class="radio"></image>
                  <image
                    v-if="item.result == 2"
                    src="/static/order/r-s.png"
                    mode="aspectFit"
                    class="radio"></image>
                  <text>NG</text>
                </view>
              </view>
            </view>
            <view
              @click="addItemInfo(item, index)"
              v-if="!item.isAddItem"
              class="flex-center add-icon">
              <image src="/static/order/add.png" mode="aspectFit"></image>
            </view>
            <view
              @click="addInfo"
              class="flex-center add-icon"
              v-if="index == list.length - 1">
              <image src="/static/order/add.png" mode="aspectFit"></image>
            </view>
          </view>
        </view>

        <view class="wrap mb16">
          <view class="box flexc">
            <view class="">备注</view>
            <view class="" style="height: 400upx">
              <u--textarea
                v-model="topObj.info"
                border="none"
                style="height: 100%"
                height="200"
                maxlength="200"
                placeholder="请输入备注信息"
                count></u--textarea>
            </view>
          </view>
        </view>
        <view class="wrap mb16" v-if="record_status_userVueMap[type]">
          <record_status_userVue :formType="record_status_userVueMap[type]" />
        </view>
        <!-- 结束 -->
      </view>
      <view class="footer flex-between">
        <view @click="submitForm(1)" class="box-icon column-flex-center">
          <image src="/static/order/5.png" mode="aspectFit"></image>
          <view class="">存草稿</view>
        </view>
        <view @click="submitForm(0)" class="btn">提交</view>
      </view>
    </template>
    <!-- 查看报表 -->
    <template v-if="tabCurrent == 1">
      <view class="nav1 flex-between">
        <view class="flex">
          <view class="">生产过程现场记录表</view>
          <!-- 	<image
						src="/static/order/d.png"
						class="d-icon"
						mode="aspectFit"></image> -->
        </view>
        <view @click="exportInfo" class="flex">
          <image
            src="/static/order/e.png"
            mode="aspectFit"
            class="e-icon"></image>
          <view class="nav1-text">导出</view>
        </view>
      </view>
      <view @click="showTime = true" class="time-box">
        <view class="flex">
          <view class="">选择时间</view>
          <image
            src="/static/order/d.png"
            mode="aspectFit"
            class="d1-icon"></image>
        </view>
        <view class="time-box-text">{{ topTime }}</view>
      </view>
      <view class="flex1 over wrap1" style="padding-bottom: 50upx">
        <view class="">表单提交次数</view>
        <view class="wrap1-num">{{ viewInfoTotal }}</view>
        <view class="wrap1-des">数据统计明细</view>
        <view class="flex-between wrap1-tip">
          <view class="flex-center">
            <text>部门：</text>
            <text>{{ action[type] }}</text>
          </view>
          <view @click="showCheckUser = true" class="flex-center">
            <text>检验人：</text>
            <text>
              {{ viewInfoCheckUserObj.inspector_user_name || "请选择" }}
            </text>
            <image src="/static/order/d.png" mode="aspectFit" class="d"></image>
          </view>
          <view @click="showDate = true" class="flex-center">
            <text>检验日期：</text>
            <text>
              {{ viewInfoQueryObj.test_time || "请选择" }}
            </text>
            <image src="/static/order/d.png" mode="aspectFit" class="d"></image>
          </view>
          <!-- <view class="flex-center ml76">
            <text>第</text>
            <view class="wrap1-text">1</view>
            <text>车次</text>
            <image src="/static/order/d.png" mode="aspectFit" class="d"></image>
          </view> -->
        </view>
        <view class="table-class">
          <view class="table-class-line"></view>
          <!-- <zb-table
						:show-header="true"
						:columns="column"
						:border="true"
						:flt="true"
						:data="viewInfoData"></zb-table> -->
          <view class="table-title">
            <view>序号</view>
            <view>校验项目</view>
            <view>校验时间</view>
            <view>审核状态</view>
          </view>
          <view
            class="table-class table-class-detail flex"
            v-for="(item, index) in viewInfoData"
            :key="index">
            <view class="no-class">
              {{ item.quality_control_no }}
            </view>
            <view>
              <view
                v-for="(child, index) in item.detail"
                class="flex table-detail">
                <view>
                  {{ child.title }}
                </view>
                <view>{{ child.inspection_time }}</view>
              </view>
            </view>
            <view class="status_text" :class="statusMap[item.status_text]">
              {{ item.status_text }}
            </view>
          </view>
        </view>
        <view class="page-set mt15">
          <uni-pagination
            title="标题文字"
            :current="listPaginationObj.page"
            @change="pageBtn"
            :total="viewInfoTotal"></uni-pagination>
        </view>
      </view>
      <!-- 日历弹框 -->
      <pop_time
        @confirmDate="confirm"
        @tiemCheck="tiemCheck"
        @closeTime="showTime = false"
        :showTime="showTime"
        :mode="mode" />
      <!-- 白条统计的弹框 -->
      <pop_navVue :show="btShow" :btList="btList" @popShowBtn="popShowBtn" />
      <!-- 校验时间 -->
      <u-calendar
        :show="showDate"
        color="#DA4334"
        mode="single"
        @close="showDate = false"
        @confirm="
          (val) => {
            viewInfoQueryObj.test_time = val[0];
            get_quality_control_list();
            showDate = false;
          }
        "></u-calendar>
    </template>
    <!-- 查看数据 -->
    <template v-if="tabCurrent == 2">
      <view class="search flex">
        <image src="/static/order/search.png" mode="aspectFit"></image>
        <input
          confirm-type="search"
          v-model="viewDataObj.keyword"
          type="text"
          class="flex1"
          placeholder="搜索" />
      </view>
      <view class="flex1 over" style="padding-bottom: 50upx">
        <scroll-view
          @scrolltolower="upper"
          scroll-y="true"
          style="height: 100%">
          <view class="content-wrap">
            <view
              class="content-box"
              @click="toMainPage(item)"
              v-for="(item, index) in viewListData"
              :key="index">
              <view class="flex-between">
                <view class="flex">
                  <view class="t">{{ item.title }}</view>
                  <view class="edit-text" v-if="item.pid > 0">修改</view>
                </view>
                <view class="t1">{{ item.created_at }}</view>
              </view>
              <view class="no flex-between">
                <view class="">序号：{{ item.quality_control_no }}</view>
                <view class="cred" v-if="item.pid > 0">历史数据</view>
              </view>

              <view class="t2 mb12">部门：{{ item.type_tile }}</view>
              <view class="t2">检验人：{{ item.inspector_user_name }}</view>
              <view class="flex-between mt34">
                <view class="flex">
                  <image
                    class="img"
                    src="/static/order/3.png"
                    mode="aspectFit"></image>
                  <!-- <image class="img" src="/static/order/4.png" mode="aspectFit"></image> -->
                  <text :class="item.status == 3 ? 'ac1' : 'ac'">
                    {{ item.user_name }}
                  </text>
                </view>
                <view
                  :class="
                    item.status == 3 ? 'ac2' : item.status == 4 ? 'ac3' : 'ac4'
                  ">
                  {{ item.status_name }}
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </template>
    <!-- 校验人 -->
    <u-picker
      @cancel="() => (showCheckUser = false)"
      @confirm="confirmCheckUser"
      :show="showCheckUser"
      confirmColor="#DA4334"
      :columns="checkUserList"
      keyName="real_name"></u-picker>
    <!-- 校验日期 -->
    <u-calendar
      @close="() => (showCheckDate = false)"
      @confirm="
        (val) => {
          topObj.test_time = val[0];
          showCheckDate = false;
        }
      "
      color="#DA4334"
      :maxDate="maxDate"
      :minDate="minDate"
      :month-num="12"
      mode="single"
      :default-date="defaultDate"
      :show="showCheckDate"></u-calendar>
    <!-- 校验时间 -->
    <u-datetime-picker
      :show="showCheckTime"
      v-model="checkTime"
      title="时间选择"
      cancelColor="#DA4334"
      confirmColor="#DA4334"
      @confirm="
        ({ value }) => {
          list[listClickIndex].inspection_time = value;
          showCheckTime = false;
        }
      "
      @cancel="() => (showCheckTime = false)"
      mode="time"></u-datetime-picker>
  </view>
</template>

<script>
const d = new Date();
const year = d.getFullYear();
let month = d.getMonth() + 1;
month = month < 10 ? `0${month}` : month;
const date = d.getDate() < 10 ? `0${d.getDate()}` : d.getDate();
const maxDate = new Date(year + 1, 0, 0).getTime();
const minDate = new Date(year, 0, 1).getTime();
const defaultDate = [`${year}-${month}-${date}`];
const monthNum = (year - 2022 + 1) * 12;
import log from "../../plugin/log";
import pop_navVue from "./pop_nav.vue";
import record_status_userVue from "./record_status_user.vue";
import pop_time from "../order/pop_time.vue";
import utils from "../../plugin/util.js";
import { listDataMap } from "./listData.js";
export default {
  components: { pop_navVue, record_status_userVue, pop_time },
  props: {
    type: {
      type: String,
      default: 1,
    },
  },
  data() {
    return {
      monthNum,
      maxDate,
      minDate,
      defaultDate,
      viewInfoTotal: 0,
      viewInfoData: [],
      viewInfoCheckUserObj: {
        inspector_user_id: "",
        inspector_user_name: "",
      },
      isHavePermission: false,
      statusMap: {
        拒绝: "refuse-class",
        撤销: "cx-class",
        提交: "submit",
      },
      column: [
        {
          name: "quality_control_no",
          label: "序号",
          fixed: true,
          width: 170,
          align: "center",
          emptyString: "--",
        },
        {
          name: "farmer_title",
          label: "校验项目",
          align: "center",
        },
        {
          name: "test_time",
          label: "校验时间",
          align: "center",
        },
      ],
      viewInfoQueryObj: {
        start_time: `${new Date().getFullYear()}` + "-" + "01-01",
        end_time: `${new Date().getFullYear()}` + "-" + "12-12",
        test_time: "",
      },
      topTime:
        utils.timeFormat(
          new Date(`${new Date().getFullYear()}` + "-" + "01-01")
        ) +
        "-" +
        utils.timeFormat(
          new Date(`${new Date().getFullYear()}` + "-" + "12-31")
        ),
      listPaginationObj: {
        page: 1,
        limit: 10,
      },
      action: {
        1: "一工段",
        2: "二工段",
        3: "三工段",
        4: "四工段",
        5: "副产车间",
        6: "五工段",
      },
      showCheckUser: false,
      record_status_userVueMap: {
        1: "12",
        2: "13",
        3: "14",
        4: "15",
        5: "16",
        6: "17",
      },
      topObj: {
        test_time: "",
        inspector_user_id: "",
        inspector_user_name: "",
        info: "",
        is_draft: "0",
      },
      listCopy: [],
      list: listDataMap[1],
      tableData: [],
      showCheckDate: false,
      showCheckTime: false,
      tabCurrent: 0,
      tabList: [
        { title: "发起提交", value: 0 },
        { title: "查看报表", value: 1 },
        { title: "查看数据", value: 2 },
      ],
      orders: [
        {
          title: "111",
          date: "2023-13-21",
          no: "12331231",
          time: "11-22-22",
          name: "131231",
          status: 3,
          t: "ss",
          t1: "323",
        },
      ],
      showTime: false, //时间弹框
      timeIndex: 0,
      showTimeList: [
        "昨天",
        "本周",
        "本月",
        "近7天",
        "近30天",
        "近90天",
        "近180天",
        "选择时间段",
      ],
      showDate: false, //日历弹框
      mode: "range",
      btShow: false, //查看数据的第一个选择框
      btList: {
        1: "白条数据统计",
        2: "抓鸭副品统计",
      },
      showTime1: false,
      checkTime: "",
      checkUserList: [],
      listClickIndex: "",
      viewListData: [],
      viewDataObj: {
        page: 1,
        limit: 20,
        keyword: "",
      },
      userRoleMap: {
        1: "quality_one",
        2: "quality_two",
        3: "quality_three",
        4: "quality_four",
        5: "quality_workshop",
        6: "quality_five",
      },
    };
  },
  created() {
    this.getCheckUser();
    this.getUserPermission();
  },
  watch: {
    type(val) {
      this.type = val;
      // if (this.type == 3) {
      //   let item = listDataMap[3].find((item) => {
      //     return item.title == "无油包";
      //   });
      //   item.title = "油残留";
      // }
      // if (this.type == 4) {
      //   let item = listDataMap[4].find((item) => {
      //     return item.title == "油包";
      //   });
      //   item.title = "水泡";
      // }
      console.log(this.type, "val--------", val);
      this.list = JSON.parse(JSON.stringify(listDataMap[this.type]));
      this.listCopy = JSON.parse(JSON.stringify(this.list));
    },
  },
  methods: {
    showCheckDateFn() {
      this.showCheckDate = true;
    },
    getUserPermission() {
      this.$api({
        url: "/getUserRoleBySlug",
        method: "get",
        data: {
          slug: this.userRoleMap[this.type],
        },
      }).then((res) => {
        this.isHavePermission = res.data;
      });
    },
    exportInfo() {
      console.log("导出");
      let obj = {
        type: this.viewInfoQueryObj.type,
        start_time: this.viewDataObj.start_time,
        end_time: this.viewDataObj.end_time,
        train_number: this.viewInfoTotal,
        quality_type: this.type,
        form_type: 101,
      };
      this.$store.dispatch("exportInfo", obj);
    },
    toMainPage(item) {
      this.toRoute({
        path: "quality-assurance-detail",
        query: {
          type: item.type,
          id: item.id,
        },
      });
    },
    addItemInfo(item, index) {
      // if (item.addNum && item.addNum === 4) {
      // 	return uni.showToast({
      // 		title: "最多添加四条信息",
      // 		icon: "none",
      // 	});
      // }
      this.list.splice(index + 1, 0, {
        title: item.title,
        disabled: true,
        inspection_time: "",
        inspection_num: "",
        unqualified_num: "",
        unqualified_info: "",
        result: 1,
        unqualified_level: "",
        isAddItem: true,
      });
      // if (item.addNum) {
      // 	item.addNum = item.addNum + 1;
      // } else {
      // 	item.addNum = 1;
      // }
    },
    addInfo() {
      // if (this.addNum === 4) {
      // 	return uni.showToast({
      // 		title: "最多添加四条信息",
      // 		icon: "none",
      // 	});
      // }
      this.list.push({
        title: "",
        disabled: false,
        inspection_time: "",
        inspection_num: "",
        unqualified_num: "",
        unqualified_info: "",
        result: 1,
        unqualified_level: "",
        isAdd: true,
      });
      // this.addNum += 1;
    },
    getListInfo() {
      this.$api({
        url: "/get_quality_control_list",
        method: "get",
        data: {
          quality_type: this.type,
          ...this.viewDataObj,
        },
      }).then((res) => {
        this.viewListData = res.data.list;
      });
    },
    upper() {
      if (this.viewDataObj.limit * this.viewDataObj.page >= this.viewDataTotal)
        return;
      this.viewDataObj.page += 1;
      this.getListInfo();
    },
    get_quality_control_list() {
      this.$api({
        url: "/get_quality_control_list",
        method: "get",
        data: {
          quality_type: this.type,
          ...this.listPaginationObj,
          option_type: 1,
          ...this.viewInfoQueryObj,
          userId: this.viewInfoCheckUserObj.inspector_user_id,
        },
      }).then((res) => {
        console.log(res);
        this.viewInfoTotal = res.data.total;
        this.viewInfoData = res.data.list;
      });
    },
    submitForm(draft = 0) {
      this.$api({
        url: "/save_quality_control",
        method: "post",
        data: {
          ...this.topObj,
          details: JSON.stringify(this.list),
          type: this.type,
          is_draft: draft,
        },
      }).then((res) => {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
        if (draft == "0") {
          this.topObj = {
            test_time: "",
            inspector_user_id: "",
            inspector_user_name: "",
            info: "",
            is_draft: "0",
          };
          this.list = JSON.parse(JSON.stringify(this.listCopy));
        }
      });
    },
    checkUnqualified(item, num1, num2) {
      if (num1 && num2) {
        item.unqualified_level = (utils.div(num2, num1) * 100).toFixed(2) + "%";
      } else {
        item.unqualified_level = "";
      }
    },

    confirmCheckUser({ value }) {
      if (this.tabCurrent == 1) {
        this.viewInfoCheckUserObj.inspector_user_id = value[0].user_id;
        this.viewInfoCheckUserObj.inspector_user_name = value[0].real_name;
        this.get_quality_control_list();
      } else {
        this.topObj.inspector_user_id = value[0].user_id;
        this.topObj.inspector_user_name = value[0].real_name;
      }

      this.showCheckUser = false;
    },
    // 获取校验人
    getCheckUser() {
      this.$api({
        url: "/get_user_list",
        method: "get",
        data: {
          type: 2,
        },
      }).then((res) => {
        this.checkUserList.push(res.data);
      });
    },
    changeResult(item, val) {
      item.result = val;
    },
    editListData(item) {
      item.disabled = !item.disabled;
    },
    //弹框组件返回
    popShowBtn(k) {
      //k
      this.btShow = false;
    },
    //查看列表的时间弹框选择
    tiemCheck({ k, data }) {
      this.viewInfoQueryObj.type = k + 1;
      this.topTime = data;
      this.showTime = false;
      this.viewInfoQueryObj.page = 1;
      this.get_quality_control_list();
    },
    //日历弹框
    confirm({ e, data, index }) {
      this.viewInfoQueryObj.start_time = e[0];
      this.viewInfoQueryObj.end_time = e[e.length - 1];
      this.topTime = data;
      this.viewInfoQueryObj.type = index + 1;
      this.showTime = false;
      this.viewInfoQueryObj.page = 1;
      this.get_quality_control_list();
    },
    //时间弹框
    timeBtn(e) {
      console.log("到达基地时间", e);
    },
    pageBtn(e) {
      this.viewInfoQueryObj.page = e.current;
      this.get_quality_control_list();
    },
    tabClick(e) {
      console.log("点击tab", e);
      console.log(this.type);
      this.tabCurrent = e.value;
      switch (e.title) {
        case "查看报表":
          this.get_quality_control_list();
          break;
        case "查看数据":
          this.getListInfo();
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/config/com.scss";

.section-common {
  width: 100%;
  height: 100%;
  background: #f5f7f9;

  .cred {
    font-size: 24rpx !important;
    color: #da4334 !important;
  }

  .box-pd {
    padding-bottom: 14upx;
    border-bottom: 1rpx solid #e4e4e4;
  }

  .table-class-line {
    width: 1upx;
    position: absolute;
    left: 40upx;
    height: 100%;
    box-shadow: 100upx 0px 6upx 0px rgba(0, 0, 0, 0.1);
    z-index: 1;
  }

  .table-class {
    width: 100%;
    position: relative;

    .table-class-detail {
      display: flex;

      & > view:nth-of-type(1) {
        width: 20%;
        word-break: break-all;
      }

      .table-detail > view:nth-of-type(1) {
        width: 260upx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .table-title {
      display: flex;
      background: #f7f7f7;
      padding: 0.6em 1em;
    }

    .table-title > view:nth-of-type(1) {
      width: 20%;
    }

    .table-title > view:nth-of-type(2) {
      width: 55%;
      margin-left: 30upx;
    }

    .table-title > view:nth-of-type(3) {
      width: 25%;
    }

    .table-title > view:nth-of-type(4) {
      width: 25%;
    }

    .status_text {
      margin-left: 20upx;
    }

    .table-detail {
      padding: 0.6em 1em;
      border-bottom: 1px solid #f5f7f9;

      & > view {
        padding: 10upx 2upx;
      }
    }

    .table-border-bottom {
      border-bottom: 2upx solid #f7f7f7;
    }
  }

  .wrap {
    background: #fff;
    padding: 0 32upx;

    .box2 {
      padding: 28upx 0;
      font-size: 32rpx;

      & > view {
        font-size: 32rpx;
        color: #171717;
      }

      & > view:nth-of-type(1) {
        color: #a0a0a0;
        margin-bottom: 28upx;
      }
    }

    .box {
      padding: 28upx 0;
      font-size: 32rpx;
      border-bottom: 1rpx solid #e4e4e4;

      & > view {
        font-size: 32rpx;
        color: #171717;
      }

      & > input {
        height: 28upx;
        text-align: right;
        font-size: 32rpx;
      }

      .box-b {
        margin-top: 28upx;

        & > input {
          height: 28upx;
          font-size: 32rpx;
        }

        & > image {
          width: 12upx;
          height: 21upx;
        }
      }

      .box-b1 {
        & > input {
          height: 28upx;
          text-align: right;
          font-size: 32rpx;
        }

        & > image {
          width: 12upx;
          height: 21upx;
          margin-left: 28upx;
        }
      }

      ::-webkit-input-placeholder {
        color: #a0a0a0;
      }
    }
  }

  .refuse-class {
    color: red;
    font-weight: bold;
  }

  .cx-class {
    color: #dd6161;
    font-weight: bold;
  }

  .edit-text {
    width: 78rpx;
    height: 36rpx;
    background: #f17303;
    font-size: 24rpx;
    color: #ffffff;
    border-radius: 14upx 0 14upx 0;
    margin-left: 16upx;
    text-align: center;
    line-height: 36upx;
  }

  .mb28 {
    margin-bottom: 28upx;
  }

  .mt15 {
    margin-top: 15upx;
  }

  .ml40 {
    margin-left: 40upx;
  }

  .box1 {
    padding-top: 40upx;

    & > input {
      font-size: 32rpx;
      color: #f17303;
    }

    & > view {
      font-size: 32rpx;
      color: #da4334;
    }
  }

  .radio {
    width: 36rpx;
    height: 36rpx;
    margin-right: 12upx;
  }
}
</style>
